<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min(1).css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/common.js"></script>
    <script>
        var forward = getUrlParam("forward");//获取跳转页面
    </script>
    <style type="text/css">
        .el-main {
            position: absolute;
            top: 70px;
            bottom: 0px;
            left: 200px;
            right: 10px;
            padding: 0;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }

        .datatable td, .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }
    </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <el-container>
        <el-header class="main-header" style="height:70px;">
            <nav class="navbar navbar-static-top" :class=''>
                <!-- Logo -->
                <a href="#" class="logo" style="text-align:center">
                    <span class="logo-lg"><img src="../img/logo.png"></span>
                </a>
                <div class="right-menu">
                    <span class="help"><i class="fa fa-exclamation-circle" aria-hidden="true"></i>帮助</span>
                    <el-dropdown class="avatar-container right-menu-item" trigger="click">
                        <div class="avatar-wrapper" style="cursor: pointer">
                            <img src="../img/user2-160x160.jpg" id="user-avatar" class="user-avatar"
                                 style="cursor: pointer">
                            {{username}}
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided>
                                <span style="display:block;" @click="handleChgAvatar()">修改头像</span>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <span style="display:block;" @click="handleChgPwd()">修改密码</span>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <a href="/logout.do">
                                    <span style="display:block;">退出</span></a>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </nav>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu>
                    <el-submenu v-for="menu in menuList" :index="menu.path">
                        <template slot="title">
                            <i class="fa" :class="menu.icon"></i>
                            {{menu.name}}
                        </template>
                        <template v-for="child in menu.children">
                            <el-menu-item :index="child.path">
                                <a :href="child.linkUrl" target="right">{{child.name}}</a>
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container id="iframe_part">
                <iframe name="right" class="el-main" src="welcome/demo/tikm202006072243/index.html" width="100%"
                        height="880px"
                        frameborder="0"></iframe>
            </el-container>
        </el-container>
    </el-container>

    <!-- 修改密码标签弹层 -->
    <div class="add-form">
        <el-dialog title="修改密码" :visible.sync="changePwdVisible" style="width: 60%;margin: auto">
            <el-form ref="changePwdForm" :model="chgPwdInfo" label-position="right"
                     label-width="100px" :rules="chgPwdRules">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="手机号" prop="telephone">
                            <el-input placeholder="请输入您的手机号"
                                      maxlength="11"
                                      v-model="chgPwdInfo.telephone"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="验证码" prop="validateCode">
                            <el-input placeholder="请输入验证码" maxlength="6"
                                      v-model="chgPwdInfo.validateCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1">&nbsp;</el-col>
                    <el-col :span="4">
                        <el-button type="primary" id="validateCodeButton" ref="validateCodeButton"
                                   @click="sendValidateCode" plain>发送验证码
                        </el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="密 码" prop="password">
                            <el-input
                                    type="password"
                                    v-model="chgPwdInfo.password"
                                    maxlength="16"
                                    placeholder="请输入要修改的密码"
                                    show-password
                                    clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="changePwdVisible = false">取消</el-button>
                <el-button type="primary" @click="ChgPwd()">修改</el-button>
            </div>
        </el-dialog>
    </div>

    <!-- 修改头像标签弹层 -->
    <div class="add-form">
        <el-dialog title="修改头像" :visible.sync="changeAvatarVisible" style="width: 40%;margin: auto">
            <el-form ref="changeAvatarForm" label-position="right"
                     label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="上传图片">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/user/uploadAvatar.do"
                                    :auto-upload="autoUpload"
                                    name="imgFile"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="changeAvatarVisible = false">取消</el-button>
                <el-button type="primary" @click="ChgAvatar()">修改</el-button>
            </div>
        </el-dialog>
    </div>

</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            autoUpload: true,//自动上传
            username: '',//当前登录用户的用户名
            avatar: '', //头像
            menuList: [],
            chgPwdInfo: {},  //修改密码信息
            changePwdVisible: false,
            imageUrl: null,//模型数据，用于上传图片完成后图片预览
            changeAvatarData: {},
            changeAvatarVisible: false,
            chgPwdRules: {    //校验规则
                telephone: [{required: true, message: '手机号为必填项', trigger: 'blur'}],
                validateCode: [{required: true, message: '验证码为必填项', trigger: 'blur'}],
                password: [{required: true, message: '密码为必填项', trigger: 'blur'}]
            }
        },
        methods: {
            //发送验证码
            sendValidateCode() {
                //获取用户输入的手机号
                var telephone = this.chgPwdInfo.telephone;
                //调用js方法，校验输入的手机号是否合法
                if (!checkTelephone(telephone)) {
                    //校验不通过，提示错误信息
                    this.$message.error('请输入正确的手机号');
                    return false;
                }
                validateCodeButton = this.$refs['validateCodeButton'];//锁定dom对象
                //发送ajax请求，为用户发送手机验证码
                axios.post("/validateCode/send4ChgPwd.do?telephone=" + telephone).then((res) => {
                    if (!res.data.flag) {
                        //短信验证码发送失败
                        this.$message.error(res.data.message);
                    } else {
                        //发送成功
                        //在按钮上显示30秒倒计时效果
                        clock = window.setInterval(eleDoLoop, 1000);//定时器方法，可以实现每隔指定的时间调用指定的方法
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        });
                    }
                });
            },
            handleChgPwd() {
                this.changePwdVisible = true;
                this.chgPwdInfo = {};
                this.$refs['changePwdForm'].clearValidate();
            },
            //处理修改密码请求
            ChgPwd() {
                //获取用户输入的手机号
                var telephone = this.chgPwdInfo.telephone;
                //调用js方法，校验输入的手机号是否合法
                if (!checkTelephone(telephone)) {
                    //校验不通过，提示错误信息
                    this.$message.error("请输入正确的手机号");
                    return false;
                }
                //发送ajax请求，将表单数据提交到Controller进行登录处理
                axios.post("/user/chgpwd.do", this.chgPwdInfo).then((res) => {
                    if (res.data.flag) {
                        //修改成功 关闭窗口
                        this.changePwdVisible = false;
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        });
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            },
            ChgAvatar() {
                if (this.changeAvatarData.avatar == null) {
                    this.$message.error("头像未上传");
                    return null;
                }
                //发送ajax请求，将修改后的表单数据（检查组基本信息、勾选的检查项）提交到后台进行处理
                axios.post("/user/chgAvatar.do", this.changeAvatarData).then((res) => {
                    //关闭编辑窗口
                    this.changeAvatarVisible = false;
                    this.$message({
                        type: res.data.flag == true ? 'success' : 'error',
                        message: res.data.message
                    });
                    document.getElementById("user-avatar").src = "http://qgixkwiux.hd-bkt.clouddn.com/" + this.changeAvatarData.avatar;
                })
            },
            handleChgAvatar() {
                this.changeAvatarVisible = true;
                if (this.avatar != null) {
                    this.imageUrl = "http://qgixkwiux.hd-bkt.clouddn.com/" + this.avatar;
                }
            },
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response, file) { //http 200
                this.imageUrl = "http://qgixkwiux.hd-bkt.clouddn.com/" + response.data;
                this.$message({
                    type: response.flag ? 'success' : 'error',
                    message: response.message
                });
                //设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
                this.changeAvatarData.avatar = response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        },
        created() {

            //页面重定向
            if (location.href.indexOf("main.html") == -1) {
                location.href = "/pages/main.html"
            }

            //页面跳转
            if (forward != null && forward.length > 0) {
                $("#iframe_part").empty();
                $("#iframe_part").append("<iframe name=\"right\" class=\"el-main\" src=\"" + forward + "\" width=\"100%\" height=\"880px\"\n" +
                    "                        frameborder=\"0\"></iframe>");
            }

            //发送ajax请求，请求Controller获取当前登录用户的用户名，展示到页面中
            axios.get("/user/getLoginUsername.do").then((res) => {
                if (res.data.flag) {
                    this.username = res.data.data;
                    localStorage.setItem("username",JSON.stringify(this.username));
                } else {
                    this.$message.error(res.data.message);
                }
            });

            //获取用户菜单
            axios.get("/user/getMenuListByUsername.do").then((res) => {
                if (res.data.flag) {
                    this.menuList = res.data.data;
                } else {
                    this.$message.error(res.data.message);
                }
            });

            //获取头像
            axios.get("/user/getAvatarByUsername.do").then((res) => {
                if (res.data.flag) {
                    this.avatar = res.data.data;
                    if (this.avatar != null) {
                        document.getElementById("user-avatar").src = "http://qgixkwiux.hd-bkt.clouddn.com/" + this.avatar;
                    }
                } else {
                    this.$message.error(res.data.message);
                }
            });
        }
    });
    $(function () {
        var wd = 200;
        $(".el-main").css('width', $('body').width() - wd + 'px');
    });
</script>
</html>
